<template>
  <div>
    <div class="pageCard">
      <a-form layout="inline" :model="formSearch" style="align-items: center">
        <a-form-item>
          <a-tree-select
            allowClear
            v-model:value="formSearch.hospitalDepartId"
            style="width: 200px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="departmentList"
            placeholder="请选择科室"
            tree-default-expand-all
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item>
          <a-select
            allowClear
            style="width: 200px"
            v-model:value="formSearch.type"
            placeholder="请选择预警类型"
          >
            <a-select-option
              v-for="item in alarmTypeList"
              :key="item.code"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item style="width: 30%; ">
          <a-range-picker
            style="width: 100%"
            :locale="locale"
            v-model:value="formSearch.time"
            :valueFormat="valueFormat"
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="getSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="toresetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="background: #fff">
      <a-table
        style="padding: 0 20px"
        :pagination="pagination"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data-source="list"
      >
        <template #type="{ record }">
          <div>
            {{ filter_alarm_type(record.type) }}
          </div>
        </template>
        <template #status="{ record }">
          <div>
            {{ record.status == "wait" ? "待处理" : "已处理" }}
          </div>
        </template>
        <template #operation="{ record }">
          <div style="display: flex; align-items: center">
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
              @click="delHandle(record)"
              v-if="record.status == 'wait'"
            >
              处理
            </div>
            <div
              v-else
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
              @click="lookHandle(record)"
            >
              查看
            </div>
          </div>
        </template>
        <template #title>
          <div class="ANTTable_header">
            <div style="font-weight: bold">预警记录列表</div>
            <div></div>
          </div>
        </template>
      </a-table>
    </div>

    <a-modal
      width="60%"
      v-model:visible="visible"
      :title="handleTitle"
      @ok="handleOk"
      @cancel="handleCancle"
      ok-text="确认"
      cancel-text="取消"
    >
      <child
        v-if="visible"
        :handleType="handleType"
        :handleRow="handleRow.data"
        ref="child"
        @finish="finishHandle"
      ></child>
    </a-modal>
  </div>
</template>
<script>
import child from "./components/child.vue";
import { createVNode, onMounted, reactive, ref, toRefs, watch } from "vue";
import * as utils from "@/utils/index.js";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
import { Modal, message } from "ant-design-vue";
import { hospitalDepartList } from "@/api/hospitalDepart.js";
import * as alarmRecordApi from "@/api/alarmRecord";
const valueFormat = "YYYY-MM-DD";
// 表格Column
const columns = [
 
  {
    title: "预警时间",
    dataIndex: "createTime",
  },
  {
    title: "医废编号",
    dataIndex: "objectCode",
  },
  {
    title: "医废暂存点",
    dataIndex: "hospitalPlaceName",
  },
  {
    title: "预警类型",
    dataIndex: "预警类型",
    slots: { customRender: "type" },
  },
  {
    title: "科室",
    dataIndex: "hospitalDepartName",
  },
  {
    title: "状态",
    dataIndex: "status",
    slots: { customRender: "status" },
  },

  {
    title: "操作",
    dataIndex: "operation",
    width: 150,
    slots: { customRender: "operation" },
  },
];
const useForm = Form.useForm;
export default {
  components: {
    child,
    ExclamationCircleOutlined,
  },
  setup(props, { emit }) {
    const formSearch = reactive({
      hospitalDepartId: null,
      type: null,
      time: null,
    });
    const tableData = reactive({ list: [], total: 0 });
    const { resetFields } = useForm(formSearch);
    const pageSize = ref(10);
    const pageIndex = ref(1);

    const filter_alarm_type = (val) => {
      if (!val) return "";
      switch (val) {
        case "out_depot_time_red":
          return "出库超时红色";
        case "out_depot_time_yellow":
          return "出库超时黄色";
        case "do_collect_weight_red":
          return "收集超重红色";
        case "do_collect_weight_yellow":
          return "收集超重黄色";
        case "in_depot_weight_red":
          return "入库超重红色";
        case "in_depot_weight_yellow":
          return "入库超重黄色";
        case "out_depot_weight_red":
          return "出库超重红色";
        case "out_depot_weight_yellow":
          return "出库超重黄色";
        case "do_collect_time_red":
          return "收集超时红色";
        case "do_collect_time_yellow":
          return "收集超时黄色";
        case "in_depot_time_red":
          return "入库超时红色";
        case "in_depot_time_yellow":
          return "入库超时黄色";
      }
    };
    // 查询
    const getSearch = () => {
      console.log(333);
      pageIndex.value = 1;
      pagination.current = 1;
      handleGetDataList();
    };

    const pagination = reactive({
      total: 0,
      current: pageIndex.value,
      pageSize: pageSize.value, // 默认每页显示数量
      showSizeChanger: true, // 显示可改变每页数量
      pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
      showTotal: (total) => `总数 ${total}条数据`, // 显示总数
      onChange: (page, size) => {
        onPageChange(page, size);
      }, // 改变每页数量时更新显示
      onShowSizeChange: (current, size) => {
        onSizeChange(current, size);
      },
    });
    // 分页
    const onSizeChange = (current, size) => {
      pageIndex.value = 1;
      pagination.current = 1;
      pageSize.value = size;
      handleGetDataList();
    };
    const onPageChange = (current, size) => {
      pageIndex.value = current;
      pagination.current = current;
      handleGetDataList();
    };
    // 获取表格
    const handleGetDataList = async () => {
      tableData.list = [];
      let params = {
        ...formSearch,
        time:null,
        warnTimeEnd:formSearch.time ?formSearch.time[1] :'',
        warnTimeStart:formSearch.time ?formSearch.time[0] :'',
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
      };
      alarmRecordApi.warnBaseList(params).then((res) => {
        if (res && res.success) {
          console.log(123);
          console.log(res);
          tableData.list = res.data;
          pagination.total = res.total;
        }
      });
    };

    //获取预警类型枚举值
    const alarmTypeList = ref([]);
    const handleGetalarmTypeList = () => {
      alarmRecordApi.getListByType({ type: "warn_classify" }).then((res) => {
        if (res && res.success) {
          alarmTypeList.value = res.data;
        }
      });
    };
    // 重置表格
    const toresetFields = () => {
      resetFields();
      getSearch();
    };
    // 监听表格
    watch(
      () => formSearch,
      (curAge, preAge) => {
        getSearch();
      },
      { deep: true }
    );
    // 获取科室数据
    const departmentList = ref([]);
    const getKSData = async () => {
      let res = await hospitalDepartList({
        isPage: false,
        name: "",
      });
      if (res && res.success) {
        let departmentListO = res.data.map((item) => {
          item.label = item.name;
          item.value = item.id;
          return item;
        });
        departmentList.value = utils.treeDataTranslate(departmentListO);
        console.log(123444444);
        console.log(departmentList.value);
      }
    };
    //  新增功能
    const visible = ref(false);
    const handleType = ref("add");
    const handleTitle = ref("新增耗材申请");
    const handleRow = reactive({ data: {} });
    const addHandle = () => {
      visible.value = true;
      handleType.value = "add";
      handleTitle.value = "新增耗材申请";
    };
    const lookHandle = (data) => {
      visible.value = true;
      handleType.value = "look";
      handleTitle.value = "查看";
      handleRow.data = {
        ...data,
      };
    };

    // 处理
    const delHandle = (data) => {
      visible.value = true;
      handleType.value = "edit";
      handleTitle.value = "处理";
      handleRow.data = {
        ...data,
      };
    };

    // 完成操作
    const finishHandle = () => {
      visible.value = false;
      getSearch();
    };

    const child = ref(null);
    const handleOk = () => {
      child.value.handleSave();
    };

    const handleCancle = () => {
      child.value.resetForm();
    };

    onMounted(() => {
      // 获取科室
      getKSData();
      // 获取类型
      handleGetalarmTypeList()
      handleGetDataList();
    });
    return {
      child, //子组件
      // 耗材申请列表
      formSearch,
      toresetFields,
      columns,
      ...toRefs(tableData),
      handleGetDataList,
      getSearch,

      visible,
      addHandle,
      delHandle,
      lookHandle,
      handleTitle,
      handleRow,
      handleType,
      handleOk,
      handleCancle,
      finishHandle,

      pagination,
      // 科室
      departmentList,
      // 预警类型
      alarmTypeList,

      filter_alarm_type,
      valueFormat,
    };
  },
};
</script>